<template>
	<div class="app-container">
		<!--表单组件-->
		<el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
			:title="crud.status.title" width="880px">
			<el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="80px">
				<el-row :gutter="0.5">
					<el-col :span="24">
						<el-form-item label="名称" prop="name">
							<el-input v-model="form.name" style="width: 743px;" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="0.5">
					<el-col :span="8">
						<el-form-item label="注册资本">
							<el-input v-model="form.capital" style="width: 150px;" />
							<span style="color: #C0C0C0;margin-left: 10px;">元</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="员工规模">
							<el-input v-model="form.staffCount" style="width: 150px;" />
							<span style="color: #C0C0C0;margin-left: 10px;">人</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="公司类型">
							<el-input v-model="form.type" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="0.5">
					<el-col :span="24">
						<el-form-item label="公司简介">
							<el-input v-model="form.brief" :rows="3" type="textarea" style="width: 743px;" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="0.5">
					<el-col :span="24">
						<el-form-item label="地址">
							<el-input v-model="form.address" style="width: 743px;" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="0.5">
					<el-col :span="12">
						<el-form-item label="联系人">
							<el-input v-model="form.contact" style="width: 322px;" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="联系电话">
							<el-input v-model="form.phone" style="width: 322px;" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="0.5">
					<el-col :span="24">
						<el-form-item label="备注">
							<el-input v-model="form.remark" :rows="3" type="textarea" style="width: 743px;" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="0.5">
					<el-col :span="24">
						<el-form-item label="状态">
							<el-radio v-model="form.enabled" v-for="item in dict.data_status" :key="item.id"
								:label="item.value">{{ item.label }}</el-radio>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="text" @click="crud.cancelCU">取消</el-button>
				<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
			</div>
		</el-dialog>
		
		<!-- 公司信息 -->
		<el-row :gutter="10">
			<el-card class="box-card">
		<!--工具栏-->
		<div class="head-container">
			<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
			<crudOperation :permission="permission" />

			<!--表格渲染-->
			<el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
				@selection-change="crud.selectionChangeHandler" @current-change="handleCurrentChange">
				<el-table-column type="selection" width="55" />
				<el-table-column prop="name" label="名称" />
				<el-table-column prop="capital" label="注册资本" width="100"/>
				<!-- <el-table-column prop="brief" label="公司简介" /> -->
				<el-table-column prop="staffCount" label="员工规模" width="100"/>
				<el-table-column prop="type" label="公司类型" width="100"/>
				<el-table-column prop="address" label="地址" />
				<el-table-column prop="contact" label="联系人" width="80"/>
				<el-table-column prop="phone" label="联系电话" width="110"/>
				<el-table-column prop="remark" label="备注" width="100"/>
				<el-table-column label="状态" align="center" prop="enabled" width="70">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.enabled" active-color="#409EFF" inactive-color="#F56C6C"
							@change="changeEnabled(scope.row, scope.row.enabled,)" />
					</template>
				</el-table-column>
				<el-table-column v-if="checkPer(['admin','company:edit','company:del'])" label="操作" width="115px"
					align="center">
					<template slot-scope="scope">
						<udOperation :data="scope.row" :permission="permission" />
					</template>
				</el-table-column>
			</el-table>
			<!--分页组件-->
			<pagination />
		</div>
		</el-card>
		</el-row>
		
		<el-row :gutter="10" style="margin-top: 5px;">
			<el-card class="box-card" shadow="hover">
				<div slot="header" class="clearfix">
					<span>公司岗位信息</span>
				</div>
				<compayJob ref="compayJob" :permission="permission" />
		</el-card>
		</el-row>
	</div>
</template>

<script>
	import compayJob from './compayJob'
	import crudCompany from '@/api/company'
	import CRUD, {
		presenter,
		header,
		form,
		crud
	} from '@crud/crud'
	import rrOperation from '@crud/RR.operation'
	import crudOperation from '@crud/CRUD.operation'
	import udOperation from '@crud/UD.operation'
	import pagination from '@crud/Pagination'

	const defaultForm = {
		companyId: null,
		name: null,
		capital: null,
		brief: null,
		staffCount: null,
		type: null,
		address: null,
		contact: null,
		phone: null,
		remark: null,
		enabled: 'true'
	}
	export default {
		name: 'Company',
		components: {
			compayJob,
			pagination,
			crudOperation,
			rrOperation,
			udOperation
		},
		mixins: [presenter(), header(), form(defaultForm), crud()],
		dicts: ['data_status'],
		cruds() {
			return CRUD({
				title: '公司',
				url: 'api/company',
				idField: 'companyId',
				sort: 'companyId,desc',
				crudMethod: {
					...crudCompany
				}
			})
		},
		data() {
			return {
				permission: {
					add: ['admin', 'company:add'],
					edit: ['admin', 'company:edit'],
					del: ['admin', 'company:del']
				},
				rules: {
					name: [{
						required: true,
						message: '名称不能为空',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			// 新增与编辑前做的操作
			[CRUD.HOOK.afterToCU](crud, form) {
				form.enabled = `${form.enabled}`
			},
			// 钩子：在获取表格数据之前执行，false 则代表不获取数据
			[CRUD.HOOK.beforeRefresh]() {
				if (this.$refs.compayJob) {
					this.$refs.compayJob.query.companyName = ''
				}
				return true
			},
			// 改变状态
			changeEnabled(data, val) {
				this.$confirm('此操作将 "' + this.dict.label.data_status[val] + '" ' + data.name + ', 是否继续？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					crudCompany.edit(data).then(res => {
						this.crud.notify(this.dict.label.data_status[val] + '成功', CRUD.NOTIFICATION_TYPE
							.SUCCESS)
					}).catch(err => {
						data.enabled = !data.enabled
						console.log(err.response.data.message)
					})
				}).catch(() => {
					data.enabled = !data.enabled
				})
			},
			// 选中考勤后，设置考勤详情数据
			handleCurrentChange(val) {
				if (val) {
					this.$refs.compayJob.query.companyName = val.name
					this.$refs.compayJob.companyId = val.id
					this.$refs.compayJob.crud.toQuery()
				}
			}
		}
	}
</script>

<style scoped>

</style>
